<template>
	<view style="height: 100%;">
		<!-- 顶部banner -->
		<swiper style="width: 100%;" indicator-dots circular>
			<swiper-item>
				<image style="width: 100%;"
					src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/035938e94be569d9bef138fa8f7d709b.jpg?w=1080&h=540&bg=723E97">
				</image>
			</swiper-item>

			<swiper-item>
				<image style="width: 100%;"
					src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/69cdc6addc46f71075053a82f601b83c.jpg?w=1080&h=540&bg=E6E7EA">
				</image>
			</swiper-item>
		</swiper>

		<!-- 网格菜单 -->
		<view style="display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;align-items: center;">
			<view v-for="(item,index) in gridMenus">
				<image :src="item.imgUrl" mode="aspectFit" style="width: 100%;height: 150rpx;"></image>

				<!-- <text>{{item.title}}</text> -->
			</view>
		</view>

		<!-- tab -->
		<tabs style="position: sticky;" :type="tabTitles" v-model="tabIndex" :value="tabIndex" itemColor="#03648f" @input="onTabChange"
			lineColor="#03648f" sticky="true"></tabs>

		<!-- 滑动切换内容 -->
		<swiper :current="tabIndex" :style="{ 'height':goodsSwipperHeight + 'px' }">
			<swiper-item>
				<view id="swipperitem0" style="display: flex;flex-wrap: wrap;">
					<view v-for="(item,index) in goods" style="width: 350rpx;">
						<image :src="item.imgUrl" style="width: 100%;height: 200rpx;"></image>
						<text>{{item.title}}</text>
						<text>{{item.price}}</text>
					</view>
				</view>
			</swiper-item>

			<swiper-item>
				<view id="swipperitem1" style="display: flex;flex-wrap: wrap;">
					<view v-for="(item,index) in goods" style="width: 350rpx;">
						<image :src="item.imgUrl" style="width: 100%;height: 300rpx;"></image>
						<text>{{item.title}}</text>
						<text>{{item.price}}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- <view style="display: grid;grid-template-columns: 1fr 1fr;">
			<view v-for="(item,index) in goods">
				<image :src="item.imgUrl" style="width: 100%;"></image>
				<text>{{item.title}}</text>
				<text>{{item.price}}</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gridMenus: [{
						"imgUrl": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e47dad0c224065a73a4c722eeaf1b8e1.jpg",
						"title": "爆款新品",
						"linkUrl": ""
					},
					{
						"imgUrl": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/514e2231d5d650cf74deaf6eaa60e11c.png",
						"title": "小家电",
						"linkUrl": ""
					},
					{
						"imgUrl": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0f2fec190be4c4ef53342d0a8ecdde5f.jpg",
						"title": "手环手表",
						"linkUrl": ""
					},
					{
						"imgUrl": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4b8c83d93c37d6cb35bd9071568944ea.png",
						"title": "耳机音响",
						"linkUrl": ""
					},
					{
						"imgUrl": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/94cefdac1c573830b53d72ae7568b7a2.png",
						"title": "智能灯具",
						"linkUrl": ""
					},
					{
						"imgUrl": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b9b8b8e686044afb2585e78a03ee96b6.png",
						"title": "生活居家",
						"linkUrl": ""
					},
					{
						"imgUrl": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3304e52970aa972c4f4ccd6eb424ad7.png",
						"title": "骑行车载",
						"linkUrl": ""
					},
					{
						"imgUrl": "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fed94691e4b361f237d411c3f687c2d4.png",
						"title": "健康清洁",
						"linkUrl": ""
					}
				],
				tabTitles: [{
					title: '壹'
				}, {
					title: '贰贰'
				}, {
					title: '叁叁叁'
				}, {
					title: '肆肆肆肆'
				}, {
					title: '伍伍伍伍伍'
				}, {
					title: '陆陆陆陆陆陆'
				}, {
					title: '柒柒柒柒柒柒柒'
				}],
				tabIndex: 0,
				goods: [{
						"imgUrl": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e8121b43506f63797ef6221b4fc7f584.jpg?w=330&h=330&thumb=1",
						"title": "摄像机",
						"price": "189"
					},
					{
						"imgUrl": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e8121b43506f63797ef6221b4fc7f584.jpg?w=330&h=330&thumb=1",
						"title": "摄像机",
						"price": "189"
					},
					{
						"imgUrl": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e8121b43506f63797ef6221b4fc7f584.jpg?w=330&h=330&thumb=1",
						"title": "摄像机",
						"price": "189"
					},
					{
						"imgUrl": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e8121b43506f63797ef6221b4fc7f584.jpg?w=330&h=330&thumb=1",
						"title": "摄像机",
						"price": "189"
					},
					{
						"imgUrl": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e8121b43506f63797ef6221b4fc7f584.jpg?w=330&h=330&thumb=1",
						"title": "摄像机",
						"price": "189"
					}, {
						"imgUrl": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e8121b43506f63797ef6221b4fc7f584.jpg?w=330&h=330&thumb=1",
						"title": "摄像机",
						"price": "189"
					}, {
						"imgUrl": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e8121b43506f63797ef6221b4fc7f584.jpg?w=330&h=330&thumb=1",
						"title": "摄像机",
						"price": "189"
					}, {
						"imgUrl": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e8121b43506f63797ef6221b4fc7f584.jpg?w=330&h=330&thumb=1",
						"title": "摄像机",
						"price": "189"
					}, {
						"imgUrl": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e8121b43506f63797ef6221b4fc7f584.jpg?w=330&h=330&thumb=1",
						"title": "摄像机",
						"price": "189"
					}
				],
				goodsSwipperHeight: 800//设置完各个swipperItem数据之后切换tab后根据swiperItem设置swipper的高度
			}
		},
		
		onLoad() {
			this.$nextTick(() => {
				this.setSwipperHeight()
			})
		},
		methods: {
			onTabChange(index) {
				console.log("onTabOneChange:", index)
				this.tabIndex = index
				
				this.setSwipperHeight()
			},
			
			setSwipperHeight() {
				// uni.createSelectorQuery("#swipperitem" + this.tabIndex)
				new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().selectAll('#swipperitem' + this.tabIndex);
					view.boundingClientRect(data => {
						resolve(data);
					}).exec();
				}).then((res) => {
					console.log('res', res);
					// let topArr = res.map((item) => {
					// 	return item.top - this.scrollTopSize; /* 减去滚动容器距离顶部的距离 */
					// });
					// this.topArr = topArr;
					// /* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
					// let last = res[res.length - 1].height;
					// if (last - 20 < this.scrollHeight) {
					// 	this.fillHeight = this.scrollHeight - last + 20;
					// }
					this.goodsSwipperHeight = res[1].height
				});
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
	::-webkit-scrollbar {
		display: none;
		-webkit-appearance: none;

	}
</style>